
import React, { useState } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

const typeMap = {
  horizental: "border-b my-6 w-full flex",
  vertical: "border-l inline-block h-4 mx-2 align-middle",
}

const placementMap = {
  left: ['5%', '95%'],
  center: ['50%', '50%'],
  right: ['95%', '5%'],
}

const Divider = ({
  type,
  dashed,
  placement,
  children,
  ...rest
}) => {
  let classString = classNames({
    'border-dashed': !!dashed,
  }, typeMap[type])

  if (children) {
    classString = classString.replace(/border-b/, '')
  }

  return (
    <div
      className={classString}
      {...rest}
    >
      {type === 'horizental' && children && (
        <>
          <div className={`border-t relative transform translate-y-1/2 ${dashed ? `border-dashed` : ''}`} style={{ width: placementMap[placement][0] }}></div>
          <div className='px-4'>{children}</div>
          <div className={`border-t relative transform translate-y-1/2 ${dashed ? `border-dashed` : ''}`} style={{ width: placementMap[placement][1] }}></div>
        </>
      )}
    </div >
  )
}

Divider.defaultProps = {
  type: 'horizental',
  placement: 'center'
}

Divider.propTypes = {
  type: PropTypes.string,
  dashed: PropTypes.bool,
  placement: PropTypes.string,
  children: PropTypes.node,
  onClick: PropTypes.func
}

export default Divider